<template>
  <div id="myOrderBox">
    <span id="title">我的订单</span>
    <div id="stateBox">
      <span
        v-for="(item, index) in state"
        :key="index"
        @click="select(index)"
        :class="{ selected: sign == index }"
        >{{ item }}</span
      >
    </div>
    <div id="tips">
      <span v-for="(item, index) in tips" :key="index">{{ item }}</span>
    </div>
    <div v-for="(item, index) in order" :key="index" class="goods">
      <img :src="$store.state.url + item.goods_coverimg" alt="" />
      <span>{{ item.goods_name }}</span>
      <span>{{ item.goods_count }}</span>
      <span>{{ item.goods_price }}</span>
      <span>{{ item.indent_state }}</span>
      <span class="delete">删除</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sign: 0,
      state: ["全部订单", "待收货", "待付款", "已取消", "已完成", "已退货"],
      tips: ["订单信息", "数量", "单价", "订单状态", "操作"],
      order: [],
    };
  },
  methods: {
    async select(index) {
      this.sign = index;
    //   console.log(index)
      if ((index == 0)) {
        this.getOrder();
      } else {
        this.getOrder(index);
      }
    },
    async getOrder(state) {
      let req = {};
      if (state != undefined) {
        req = await this.axios("/lqc/myOrder", {
          params: {
            state: state,
          },
        });
      } else {
        req = await this.axios("/lqc/myOrder");
      }
      req.data.map((item) => {
        if (item.indent_state == "1") {
          item.indent_state = "待收货";
        } else if (item.indent_state == "2") {
          item.indent_state = "待付款";
        } else if (item.indent_state == "3") {
          item.indent_state = "已取消";
        } else if (item.indent_state == "4") {
          item.indent_state == "已完成";
        } else if (item.indent_state == "5") {
          item.indent_state == "已退货";
        }
      });
      this.order = req.data;
    },
  },
  async mounted() {
    this.getOrder();
    // console.log(this.order)
  },
};
</script>
<style lang="scss" scoped>
#myOrderBox {
  padding-top: 160px;
  margin: 0 50px;
  overflow: hidden;
}
#title {
  font-size: 30px;
}
#stateBox {
  margin-top: 30px;
  display: flex;
  width: 60%;
  span {
    flex: 1;
    color: rgb(144, 124, 124);
    // text-align: center;
    cursor: pointer;
    &:hover {
      font-weight: 600;
      color: black;
    }
  }
}
.selected {
  font-weight: 600;
  color: black !important;
}
#tips {
  margin-top: 40px;
  span {
    margin-left: 150px;
  }
}
.goods {
  margin-top: 20px;
  // background-color: pink;
  border-top: 1px solid rgb(197, 195, 195);
  img {
    margin-top: 20px;
    width: 170px;
    vertical-align: middle;
  }
  span {
    margin-left: 100px;
    width: 9%;
    display: inline-block;
    // vertical-align
    font-weight: 600;
  }
}
.delete{
    cursor: pointer;
}
</style>